<template>
  <div class="login-page">
    <PageHeader></PageHeader>
    <div class="login-page-main">
      <!-- 登录表单 -->
      <div class="my-form login-form" :class="[isRegisterForm?'login-delay':'lactive']">
        <div class="login-form-title fs-lg">
          <h1>登录好知</h1>
          <a href="" class="font-primary to-register-form" @click.prevent="toRegisterForm">
            注册
            <i class="iconfont icon-ArrowCircleright2-24px"></i>
          </a>
        </div>
        <a-form ref="ruleForm" :model="loginForm" :wrapper-col="wrapperCol">
          <a-form-item ref="username" name="username" v-bind="loginValidateInfos.username">
            <a-input v-model:value="loginForm.username" placeholder="手机/用户名"
              @blur="loginValidate('username', { trigger: 'blur' }).catch(() => {})" />
            <label for="" class=" my-form-label font-light"><i class="iconfont icon-user"></i></label>
          </a-form-item>
          <a-form-item ref="password" name="password" v-bind="loginValidateInfos.password">
            <a-input v-model:value="loginForm.password" type="password" placeholder="密码"
              @blur="loginValidate('password', { trigger: 'blur' }).catch(() => {})" />
            <label class="my-form-label font-light" for=""><i class="iconfont icon-password"></i></label>
          </a-form-item>
          <div class="exact-input">
            <div class="checkRadio">
              <input type="checkbox" name="rememberPassword">
              <label for="rememberPassword">记住密码</label>
            </div>
            <div class="forget-password">
              <a href="" class="font-primary">忘记密码</a>
            </div>
          </div>
          <a-form-item>
            <a-button @click="onLoginSubmit">
              <span class="btn-text">登录</span>
            </a-button>
          </a-form-item>
        </a-form>
        <div class="social">
          <span class="font-light">快捷登录</span>
          <i class="iconfont icon-qq"></i>
          <i class="iconfont icon-weixin"></i>
          <i class="iconfont icon-renrenwang"></i>
        </div>
      </div>
      <!-- 注册表单 -->
      <div class="my-form register-form" :class="[isRegisterForm?'register':'ractive']">
        <div class="login-form-title fs-lg">
          <h1>注册好知账号</h1>
          <a href="" class=" font-primary to-login-form" @click.prevent="toLoginForm">
            登录
            <i class="iconfont icon-ArrowCircleright2-24px"></i>
          </a>
        </div>
        <a-form ref="ruleForm" :model="registerForm" :rules="registerRules" :wrapper-col="wrapperCol">
          <a-form-item ref="tel" name="tel" v-bind="registerValidateInfos.tel">
            <a-input v-model:value="registerForm.tel" placeholder="手机号码"
              @blur="registerValidate('tel', { trigger: 'blur' }).catch(() => {})" />
            <label for="" class="my-form-label font-light"><i class="iconfont icon-mail"></i></label>
          </a-form-item>
          <a-form-item ref="username" name="username" v-bind="registerValidateInfos.username">
            <a-input v-model:value="registerForm.username" placeholder="请输入昵称"
              @blur="registerValidate('username', { trigger: 'blur' }).catch(() => {})" />
            <label class="my-form-label font-light" for=""><i class="iconfont icon-user"></i></label>
          </a-form-item>
          <a-form-item ref="password" name="password" v-bind="registerValidateInfos.password">
            <a-input v-model:value="registerForm.password" type="password" placeholder="密码"
              @blur="registerValidate('password', { trigger: 'blur' }).catch(() => {})" />
            <label class="my-form-label font-light" for=""><i class="iconfont icon-password"></i></label>
          </a-form-item>
          <a-form-item name="mailCode">
            <a-input v-model:value="registerForm.mailCode" class="mail-code" placeholder="短信验证码" />
            <a-button class="get-mail-code" @click="onCodeSubmit" :disabled="registerForm.tel.length !== 11">
              获取短信验证码</a-button>
          </a-form-item>
          <div class=" exact-input">
            <div class="checkRadio">
              <input type="checkbox" checked name="serviceProtocol">
              <label for="rememberPassword" class="service-protocol font-light">我已阅读并同意<a href=""
                  class="font-black">《服务协议》</a></label>
            </div>
          </div>
          <a-form-item>
            <a-button @click="onRegisterSubmit">
              <span class="btn-text">注册</span>
            </a-button>
          </a-form-item>
        </a-form>
        <div class="social">
          <span class="font-light">快捷登录</span>
          <i class="iconfont icon-qq"></i>
          <i class="iconfont icon-weixin"></i>
          <i class="iconfont icon-renrenwang"></i>
        </div>
      </div>
    </div>
    <PageFooter></PageFooter>
  </div>
</template>

<script>
import PageHeader from '../PageHeader'
import PageFooter from '../PageFooter'
import { ref, reactive, toRaw, onMounted, getCurrentInstance } from 'vue'
import { useForm } from '@ant-design-vue/use'
import { registerOneUser, loginUser } from '../../api'
import Router from '../../router'
export default {
  components: {
    PageHeader,
    PageFooter
  },
  setup () {
    const isRegisterForm = ref(true)
    function toRegisterForm () {
      isRegisterForm.value = true
    }
    function toLoginForm () {
      isRegisterForm.value = false
    }
    const loginForm = reactive({
      username: '',
      password: ''
    })
    const registerForm = reactive({
      username: '',
      password: '',
      tel: '',
      mailCode: ''
    })
    const loginRules = reactive({
      username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 12, message: 'Length should be 3 to 12', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 12, message: 'Length should be 5 to 12', trigger: 'blur' }
      ]
    })
    const registerRules = reactive({
      tel: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { type: 'number', message: '请输入有效的手机号码', transform: (value) => { return Number(value) }, trigger: 'blur' },
        { max: 11, min: 11, message: '长度必须为11位', trigger: 'blur' }
      ],
      username: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        { min: 3, max: 12, message: 'Length should be 3 to 12', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 12, message: 'Length should be 5 to 12', trigger: 'blur' }
      ]
    })
    const { validate: loginValidate, validateInfos: loginValidateInfos } = useForm(loginForm, loginRules)
    const instance = getCurrentInstance()
    console.log(instance)
    const onLoginSubmit = e => {
      e.preventDefault()
      loginValidate()
        .then(async () => {
          console.log(toRaw(loginForm))
          const loginRes = await loginUser(loginForm)
          console.log(loginRes)
          localStorage.token = loginRes.data
          instance.appContext.config.globalProperties.$message.success('登录成功！')
          Router.push('/')
        }).catch(err => {
          console.log('error', err)
        })
    }

    const { validate: registerValidate, validateInfos: registerValidateInfos } = useForm(registerForm, registerRules)
    const onRegisterSubmit = e => {
      e.preventDefault()
      registerValidate()
        .then(async () => {
          console.log(toRaw(registerForm))
          const res = await registerOneUser(toRaw(registerForm))
          console.log(res)
          if (res.status === 200) {
            instance.appContext.config.globalProperties.$message.success('注册成功！')
            Router.push('/login')
          }
        })
    }
    const onCodeSubmit = e => {
      registerValidate('tel', {}).catch(() => { })
    }
    return {
      wrapperCol: { span: 24 },
      onLoginSubmit,
      onRegisterSubmit,
      loginForm,
      registerForm,
      loginRules,
      registerRules,
      loginValidate,
      loginValidateInfos,
      registerValidate,
      registerValidateInfos,
      onCodeSubmit,
      toRegisterForm,
      toLoginForm,
      isRegisterForm
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  background-color: #f4f6f8;
  .login-page-main {
    background-color: #fff;
    overflow: hidden;
    background: url('http://www.howzhi.com/assets/img/howzhi/login_bg.jpg')
      no-repeat center center;
    height: 770px;
    width: 100%;
    position: relative;
    .my-form {
      background-color: #fff;
      width: 380px;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      margin-top: -100px;
      right: 50%;
      margin-right: -550px;
      padding: 30px 50px 40px;
      box-shadow: 2px 2px 15px #ddd;
      transition: transform 0.7s ease, visibility 0.7s ease, z-index 0.7s ease;
      &.login-form {
        visibility: hidden;
        transform: translateY(-50%) rotateY(90deg);
        z-index: -1;
      }
      &.register-form {
        margin-top: -19px;
        z-index: 11;
        visibility: visible;
        transform: translateY(-50%) rotateY(0deg);
      }
      &.lactive {
        z-index: 11;
        visibility: visible;
        display: block;
        transform: translateY(-50%) rotateY(0deg);
        transition-delay: 0.5s;
      }
      &.login-delay {
        z-index: -1;
        visibility: hidden;
        transform: translateY(-50%) rotateY(90deg);
      }
      &.register {
        transition-delay: 0.5s;
      }
      &.ractive {
        z-index: -1;
        visibility: hidden;
        transform: translateY(-50%) rotateY(90deg);
      }
      @media (max-width: 1200px) {
        margin-right: -450px;
      }
      @media (max-width: 992px) {
        margin-right: -360px;
      }
      .login-form-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        h1 {
          font-size: 22px;
        }
        .to-register-form {
          position: relative;
          top: -3px;
        }
      }
      .ant-form {
        width: 100%;
        .ant-form-item {
          width: 100%;
          margin-bottom: 20px;
          .ant-input {
            height: 45px;
            padding-left: 55px;
            border-radius: 5px;
            margin-bottom: 5px;
            &.mail-code {
              padding-left: 11px !important;
              width: 45%;
            }
          }
          .my-form-label {
            position: absolute;
            width: 30px;
            height: 18px;
            line-height: 18px;
            left: 11px;
            top: -1px;
            border-right: 1px solid #eee;
            .iconfont {
              font-size: 20px;
            }
          }
          .ant-btn {
            width: 100%;
            height: 45px;
            background-color: #15c288;
            font-size: 16px;
            border-radius: 5px;
            border: none;
            &:hover {
              background-color: #13ab78;
              outline: none;
              border: none;
            }
            .btn-text {
              color: #fff !important;
            }
            &.get-mail-code {
              width: 45%;
              margin-left: 25px;
              font-size: 14px;
              color: white;
            }
          }
        }
        .exact-input {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .checkRadio {
            label {
              position: relative;
              left: 5px;
              top: -1px;
              &.service-protocol {
                font-weight: bold;
                margin-bottom: 30px;
              }
            }
          }
          .forget-password {
            position: relative;
            top: -4px;
          }
        }
      }
      .social {
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          padding-right: 5px;
        }
        i {
          padding: 0 6px;
          font-size: 22px;
          &.icon-qq {
            color: #8fcdf0;
          }
          &.icon-weixin {
            color: #00d30d;
          }
          &.icon-renrenwang {
            color: #89dbc0;
          }
        }
      }
    }
  }
}
</style>
